<template>
  <div id="indexCategory">
    <el-dropdown >
      <el-button
        type="warning"
        icon="el-icon-goods"
        style="font-size: 30px"
        circle
      ></el-button>
      <template v-slot:dropdown>
        <el-dropdown-menu class="drop">
          
          <el-dropdown-item
            :command="i.value"
            v-for="(i, index) in Shopcate"
            :key="index"
            >

            <el-popover
              placement="right"
              width="600"
              trigger="hover"  
            >
            <div v-for="(Cate,index2) in i.data" :key="index2">
              <div class="TwoCatediv"> 
              <span class="TwoCate" @click="gotosearch(Cate.value,null)">{{Cate.value}} ></span>
              </div>

              <div class="ThreeCatediv">
              <span class="ThreeCate"  v-for="(Catename,index3) in Cate.list" :key="index3" @click="gotosearch(Cate.value,Catename)">
               {{Catename}}
              </span>
    
              </div>

            </div>

            <template v-slot:reference>
               <el-button type="text" style="width:100%;color:black;" @click="gotosearch(i.value,null)">
              <span>{{ i.value }}</span>   
             </el-button>      
            </template>

            </el-popover>


          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "IndexCategory",
  data() {
    return {
      Shopcate: [
        {
          value: "数码",
          data: [
            { value: "数码", list: ["华为", "索尼", "苹果"] },
            { value: "平板", list: ["华为平板", "苹果平板", "小米平板"] },
            { value: "手机", list: ["华为", "oppo", "小米"] },
          ],
        },
        {
          value: "办公",
          data: [
            { value: "电脑", list: ["联想电脑", "戴尔电脑", "玩家国度"] },
            { value: "文具", list: ["笔类", "文件", "笔记本"] },
            { value: "办公", list: ["鼠标", "便签", "书桌"] },
          ],
        },
        {
          value: "电器",
          data: [
            { value: "电视", list: ["美的电视", "索尼电视", "海尔电视"] },
            { value: "空调", list: ["美的空调", "索尼空调", "海尔空调"] },
            { value: "电器", list: ["美的", "海尔", "小米"] },
          ],
        },
        {
          value: "服装",
          data: [
            { value: "男装", list: ["针织衫", "雪纺衫", "羊绒服"] },
            { value: "女装", list: ["旗袍", "真皮皮衣", "婚纱"] },
            { value: "服装", list: ["男装", "女装", "童装"] },
          ],
        },
        {
          value: "鞋包",
          data: [
            { value: "男鞋", list: ["跑步鞋", "休闲鞋", "拖鞋"] },
            { value: "鞋包", list: ["跑步鞋", "休闲鞋", "拖鞋"] },
            { value: "运动服饰", list: ["卫衣", "风衣", "夹克"] },
          ],
        },
        {
          value: "砺锋超市",
          data: [
            { value: "零食", list: ["乐事", "良品铺子", "奥利奥"] },
            { value: "是超市", list: ["超市", "超市", "超市"] },
            { value: "还是超市", list: ["超市", "超市", "超市"] },
          ],
        },
      ],
    };
  },
  methods: {
    gotosearch(classify,name){
      this.$router.push({
        path:'search',
        query:{
          classify:classify,
          name:name,
        }
      })
    },

  },
};
</script>

<style scoped>
#indexCategory {
  position: fixed;
  left: 60px;
  top: 50%;
  transform: translate(0%, -50%);
  z-index: 10;
}

span{
  cursor: pointer;
}

.drop {
  text-align: center;
}

.TwoCatediv{
  width:80px;
  height: 30px;
  line-height: 30px;
  text-align: right;
  display: inline-block;
}

.TwoCatediv .TwoCate{
  font-weight: bolder;
  color: black;

}

.ThreeCatediv{
  width:350px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
}

.ThreeCatediv .ThreeCate{
  margin-left: 20px;
}

</style>
